<template>
	<view style="display: flex;flex-direction: column;height: 100%;">
		<view class="view_bg">
			<image class="img_bg" src="/static/image/mine_background.png"></image>
			<view class="view_top">
				<text>个人中心</text>
			</view>
			<view class="view_buttom">
				<view class="user_top">
					<view class="tab_left">
						<image class="user_photo" src="/static/image/icon_default_avatar.png"></image>
						<view class="user_view">
							<view class="user_msg">
								<text>{{getRealName}}</text>
								<text style="margin-left: 30rpx;">{{getPhone}}</text>
							</view>
							<text class="gs">{{getOwnerName}}</text>
						</view>
					</view>
					<view class="tab_right">
						<view class="user_type">
							<text>{{getUserType==1?'驾押人员':'管理人员'}}</text>
						</view>
					</view>
				</view>
				<view class="user_buttom">
				</view>

			</view>
		</view>
		<view class="view_content">
			<view class="view_sum">
				<view class="item" @click="woZj()" v-if="getUserType==1">
					<view>
						<image class="message" src="/static/image/icon_my_identification.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">我的证件</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="woCl()">
					<view>
						<image class="message" src="/static/image/icon_my_car.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">我的车辆</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="woQy()">
					<view>
						<image class="message" src="/static/image/icon_my_company.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">我的企业</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<template v-if="['2','4'].includes(userInfo.empInfoType)">
					<view class="item" @click="$goBack('/pages/dgs_qy/safety-code/info')" v-if="userInfo.isApplied=='1'">
						<view>
							<image class="message" src="/static/image/icon_safety_code.png"></image>
							<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">安全码</text>
						</view>
						<image class="message" src="/static/image/right_icon.png"></image>
					</view>
					<view class="item" @click="$goBack('/pages/dgs_qy/safety-code/apply')" v-else>
						<view>
							<image class="message" src="/static/image/icon_safety_code.png"></image>
							<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">安全码申请</text>
						</view>
						<image class="message" src="/static/image/right_icon.png"></image>
					</view>
				</template>
				<view class="item" @click="$goBack('/pages/dgs_qy/on-line-study/on-line-study')">
					<view>
						<image class="message" src="/static/image/study.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">在线学习</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="$goBack('/pages/dgs_qy/info-notice/info-notice')">
					<view>
						<image class="message" src="/static/image/notice.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">信息公告</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="$goBack('/pages/dgs_qy/common-problem/common-problem')">
					<view>
						<image class="message" src="/static/image/common-problem.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">常见问题</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="$goBack('/pages/dgs_qy/yjCall/yjPhone')">
					<view>
						<image class="message" src="/static/image/phone2.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">应急电话</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
				<view class="item" @click="woGy()">
					<view>
						<image class="message" src="/static/image/icon_about_us.png"></image>
						<text style="font-size: 36rpx;margin-left: 15rpx;margin-bottom: 8rpx;">关于</text>
					</view>
					<image class="message" src="/static/image/right_icon.png"></image>
				</view>
			</view>

			<view class="exit" @click="exit()">退 出</view>
			<tabBar :current="5" />
		</view>
	</view>
</template>

<script>
	import store from "@/store/index"
	import tabBar from '@/components/tab-bar/tab-bar.vue'
	export default {
		data() {
			return {
				getRealName: '',
				getPhone: '',
				getOwnerName: '',
				getUserType: ''
			}
		},
		components: {
			tabBar
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo;
			}
		},
		mounted() {
			this.getRealName = store.getters.getRealName
			this.getPhone = store.getters.getPhone
			this.getOwnerName = store.getters.getOwnerName
			this.getUserType = store.getters.getUserType
		},
		onLoad() {
			// 隐藏原生的tabbar,有自定义tabbar的页面都要写一遍
			uni.hideTabBar()
		},
		methods: {
			//我的证件
			woZj() {
				this.$goBack('./wozj')
			},
			//我的车辆
			woCl() {
				this.$goBack('./wocar')
			},
			//我的企业
			woQy() {
				this.$goBack('./wogs')
			},
			//关于
			woGy() {
				this.$goBack('./about')
			},
			//退出登录
			exit() {
				this.$store.commit('logOut');
				this.$goBack('../login/login', 4)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
	}

	.view_content {
		flex: 1;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 160rpx;
		display: flex;
		flex-direction: column;

		.view_sum {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			.item {
				display: flex;
				height: 50rpx;
				line-height: 50rpx;
				justify-content: space-between;
				padding: 25rpx 25rpx 25rpx 25rpx;

				.message {
					width: 40rpx;
					height: 40rpx;
					padding: 0rpx;
					margin-top: 8rpx;
				}
			}
		}

		.exit {
			font-size: 35rpx;
			font-weight: 700;
			border-radius: 50rpx;
			background-color: $app-color;
			margin: 0rpx auto;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			margin-top: 80rpx;
		}
	}

	.view_bg {
		height: 510rpx;
		margin-bottom: 20rpx;

		.view_top {
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -450rpx;
			position: relative;

			text {
				font-size: 40rpx;
				font-weight: 700;
			}

		}

		.view_buttom {
			background-color: #FFFFFF;
			border-radius: 10px;
			margin: -50rpx 20rpx 0rpx 20rpx;
			position: relative;
			padding-top: 15rpx;
			padding-bottom: 35rpx;
			padding-left: 25rpx;
			display: flex;
			flex-direction: column;




			.user_top {
				position: relative;

				.tab_left {
					display: flex;
					padding-left: 10rpx;

					.user_photo {
						width: 150rpx;
						height: 150rpx;
					}

					.user_view {
						display: flex;
						margin-left: 50rpx;
						flex-direction: column;
						padding-top: 30rpx;



						.user_msg {
							display: flex;

							text {
								font-size: 34rpx;
								font-weight: 600;
							}
						}

						.gs {
							margin-top: 20rpx;
							color: #A4A4A4;
							font-size: 34rpx;
						}

					}
				}

				.tab_right {
					position: absolute;
					right: 0rpx;
					top: 50rpx;

					.user_type {
						background-color: $app-color;
						width: 120rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top-left-radius: 30rpx;
						border-bottom-left-radius: 30rpx;

					}
				}

			}

			.user_buttom {
				margin-top: 30rpx;
				height: 0rpx;
				border: 1px dashed #A4A4A4;
				margin-right: 20rpx;
			}

		}

		.img_bg {
			width: 100%;
			height: 450rpx;

		}
	}
</style>